<template>
  <div class="dashboard">
    <h1>学生仪表盘</h1>
    <div class="dashboard-grid">
      <div class="dashboard-card">
        <h2>我的课程</h2>
        <ul>
          <li v-for="course in enrolledCourses" :key="course.id">
            {{ course.name }}
            <router-link :to="`/courses/${course.id}`">进入课程</router-link>
          </li>
        </ul>
      </div>

      <div class="dashboard-card">
        <h2>最近作业</h2>
        <ul>
          <li v-for="homework in recentHomeworks" :key="homework.id">
            {{ homework.title }}
            <span>截止日期: {{ homework.deadline }}</span>
          </li>
        </ul>
      </div>

      <div class="dashboard-card">
        <h2>学习进度</h2>
        <div class="progress-chart">
          <!-- 可以添加学习进度图表 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useCourseStore } from '../stores/course.store'

const courseStore = useCourseStore()
const enrolledCourses = ref([])
const recentHomeworks = ref([])

onMounted(async () => {
  enrolledCourses.value = await courseStore.getEnrolledCourses()
  recentHomeworks.value = await courseStore.getRecentHomeworks()
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.dashboard-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.dashboard-card h2 {
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.dashboard-card ul {
  list-style: none;
  padding: 0;
}

.dashboard-card li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
